import { View, Text } from "@tarojs/components"
import { useReady, useRouter } from "@tarojs/taro"
import { useState } from "react"
import { formatChargeQuantitytoText, hideLoading, showLoading, showModal } from "../../../../utils"
import { queryChargeLogByOrderNoApi, queryChargeLogPowerApi } from "../../../../services/ChargeLog"
import './index.scss'

export default () => {
    //const query = useRouter().params
    //const orderNo = query.orderNo as string
    const orderNo = '20210511113227302'

    const [order, setorder] = useState<{[key:string]:any}>({})

    async function queryChargeLogPower() {
        showLoading()
        await queryChargeLogPowerApi(orderNo)
        hideLoading()
    }

    useReady(async () => {
        showLoading()
        const result = await queryChargeLogByOrderNoApi(orderNo)
        hideLoading()
        if(!result.success) {
            showModal(result.msg)
            return
        }
        let data = result.data
        if(data) {
            data.consumeQuantity = formatChargeQuantitytoText(data.consumeQuantity)
            setorder(result.data)
        }
    })

    return <View>
        <View className='module'>
            <View className='row'>
                <Text>订单号</Text>
                <Text className='pull-right' user-select>{order.orderNo}</Text>
            </View>
            <View className='row'>
                <Text>设备号</Text>
                <View className='pull-right'><Text user-select>{order.deviceNo}</Text> #{order.portNo}</View>
            </View>
        </View>
        <View className='module m-t-10'>
            <View className='row'>
                <Text>下单时间</Text>
                <Text className='pull-right'>{order.orderCreateTime}</Text>
            </View>
            <View className='row'>
                <Text>开始充电时间</Text>
                <View className='pull-right'><Text>{order.orderStartTime}</Text></View>
            </View>
            <View className='row'>
                <Text>结束充电时间</Text>
                <View className='pull-right'><Text>{order.orderEndTime}</Text></View>
            </View>
            {order.orderResult &&
                <View className='row'>
                    <Text>结束充电原因</Text>
                    <View className='pull-right'><Text>{order.orderResult}</Text></View>
                </View>
            }
        </View>
        <View className='module m-t-10'>
            <View className='row'>
                <Text>预付金额</Text>
                <Text className='pull-right color-bd1c1c'>{order.preAmount}元</Text>
            </View>
            <View className='row'>
                <Text>实际充电时长</Text>
                <Text className='pull-right color-bd1c1c'>{order.consumeQuantity}</Text>
            </View>
            <View className='row'>
                <Text>实际耗电量</Text>
                <Text className='pull-right color-bd1c1c'>{order.consumeEnery}度</Text>
            </View>
            <View className='row'>
                <Text>实付金额</Text>
                <Text className='pull-right color-bd1c1c'>{order.factAmount}元</Text>
            </View>
        </View>
        <View className='module m-t-10'>
            <View className='row'>
                <Text className='color-0265ff' onClick={queryChargeLogPower}>点击查看功率图</Text>
            </View>
        </View>
    </View>
}